<template>
  <div class="container">
    <div class="export-header">
      <el-button  icon="el-icon-edit" type="primary" size='medium' @click="addBtn">添加商品</el-button>
      <el-button  icon="el-icon-edit" type="primary" size='medium' @click="exportClick">导出</el-button>
      <el-button  icon="el-icon-edit" type="primary" size='medium' @click="hotBtn">热卖商品设置</el-button>
    </div>
    <div class="input_modal">
      <div class="input-item">
        <span>商品名：</span>
        <el-input v-model="param.goodsName" placeholder="请输入内容" class="proName" @keyup.enter.native="search"></el-input>
      </div>
       <div class="input-item">
        <span>商品类别：</span>
        <el-select v-model='param.type' placeholder='-请选择-' @change="getList" style="height: 30px;  line-height: 30px;width:200px;">
          <el-option label="全部" value="" style="height: 30px;  line-height: 30px;width:200px;"></el-option>
          <el-option v-for="(item,index) in typeArr" :key="index" :label="item.name" :value="item.value" style="height: 30px;  line-height: 30px;width:200px;"></el-option>
        </el-select>
      </div>
       <div class="input-item">
        <span>商品分类：</span>
        <el-select v-model='param.categoryId' placeholder='-请选择-' @change="getList" style="height: 30px;  line-height: 30px;width:200px;">
          <el-option label="全部" value="" style="height: 30px;  line-height: 30px;width:200px;"></el-option>
          <el-option v-for="(item,index) in sortArr" :key="index" :label="item.categoryName" :value="item.id" style="height: 30px;  line-height: 30px;width:200px;"></el-option>
        </el-select>
      </div>
      <div class="input-item">
        <span>品牌名：</span>
        <el-select v-model='param.brandId' placeholder='-请选择-' @change="getList" style="height: 30px;  line-height: 30px;width:200px;">
          <el-option label="全部" value="" style="height: 30px;  line-height: 30px;width:200px;"></el-option>
          <el-option v-for="(item,index) in brandArr" :key="index" :label="item.brandName" :value="item.id" style="height: 30px;  line-height: 30px;width:200px;"></el-option>
        </el-select>
      </div>
      <div class="input-item">
        <span>商品编号：</span>
        <el-input v-model="param.goodsCode" placeholder="请输入内容" class="proName" @keyup.enter.native="search"></el-input>
      </div>
      <div class="input-item">
        <span>是否公开：</span>
        <el-select v-model='param.isOpen' placeholder='-请选择-' @change="getList" style="height: 30px;  line-height: 30px;width:200px;">
          <el-option label="全部" value="" style="height: 30px;  line-height: 30px;width:200px;"></el-option>
          <el-option label="是" value="y" style="height: 30px;  line-height: 30px;width:200px;"></el-option>
          <el-option label="否" value="n" style="height: 30px;  line-height: 30px;width:200px;"></el-option>
        </el-select>
      </div>
      <div class="input-item">
        <span>是否上架：</span>
        <el-select v-model='param.isOn' placeholder='-请选择-' @change="getList" style="height: 30px;  line-height: 30px;width:200px;">
          <el-option label="全部" value="" style="height: 30px;  line-height: 30px;width:200px;"></el-option>
          <el-option label="是" value="y" style="height: 30px;  line-height: 30px;width:200px;"></el-option>
          <el-option label="否" value="n" style="height: 30px;  line-height: 30px;width:200px;"></el-option>
        </el-select>
        <el-button icon="el-icon-search" type="primary" size="medium" @click="getList">查询</el-button>
      </div>
    </div>
    <div class="table_con">
      <el-table :row-key="getRowKeys" v-loading="loading" :data="tableData" @selection-change="handleSelectionChange"  :border='true'>
         <el-table-column
          fixed="left"
          type="selection"
          min-width='100'
          :reserve-selection="true"
          align="center"
        ></el-table-column> 
        <el-table-column :formatter="formatter" prop="goodsCode" label="商品编号"></el-table-column>
        <el-table-column :formatter="formatter" prop="goodsName" label="商品名称"></el-table-column>
        <el-table-column :formatter="formatter" prop="price" label="价格"></el-table-column>
        <el-table-column :formatter="formatter" prop="type" label="商品类别">
          <template slot-scope="scope">
            {{returnName(scope.row.type)}}
          </template>
        </el-table-column>
        <el-table-column :formatter="formatter" prop="categoryDTO.categoryName" label="商品分类"></el-table-column>
        <el-table-column :formatter="formatter" prop="brandDTO.brandName" label="所属品牌"></el-table-column>
        <el-table-column :formatter="formatter" prop="cityName" label="所属城市">
          <template slot-scope="scope">
            {{scope.row.cityName == 'province'?'全国':scope.row.cityName}}
          </template>
        </el-table-column>
        <el-table-column width="140" prop="restNum" label="库存总数/已售/剩余">
          <template slot-scope="scope">
            {{scope.row.stockNum}}/{{scope.row.saleNum}}/{{scope.row.restNum}}
          </template>
        </el-table-column>
        <el-table-column :formatter="formatter" prop="isOpen" label="是否公开">
           <template slot-scope="scope">
            {{scope.row.isOpen == 'y'?'是':'否'}}
          </template>
        </el-table-column>
        <el-table-column :formatter="formatter" prop="isOn" label="是否上架">
         <template slot-scope="scope">
            {{scope.row.isOn == 'y'?'是':'否'}}
          </template>
        </el-table-column>   
        <el-table-column width="200" prop="" label="操作">
          <template slot-scope="scope">
            <el-button @click="linkTo('goodCheck',scope.row.id)" type="primary" size="mini">查看</el-button>
            <el-button @click="editBtn(scope.row.id)" type="primary" size="mini">编辑</el-button>
            <el-button icon="el-icon-delete" type="danger" size="mini" @click="deleteRole(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <div class="pagination">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="param.pageIndex" :page-size="param.pageSize" :page-sizes='[10,20,30,40]' layout="total, sizes, prev, pager, next, jumper" :total="pageCount">
      </el-pagination>
    </div>
    <el-dialog title="选择添加商品的类别" :visible.sync="dialogVisible" width="30%">
      <div>
         <el-button @click="linkTo('goodEdit','','real')" style="margin:10px auto;display:block;width:200px;" type="primary">实体商品</el-button>
      </div>
      <div>
         <el-button @click="linkTo('goodEdit','','virtual')" style="margin:10px auto;display:block;width:200px;" type="primary">自营电子券</el-button>
      </div>
      <div>
         <el-button @click="linkTo('goodEdit','','third')" style="margin:10px auto;display:block;width:200px;  " type="primary">第三方电子券</el-button>
      </div>
    </el-dialog>
    <el-dialog title="热卖商品设置" :visible.sync="dialogVisible1" width="80%">
      <div v-show="!hotState" style="padding-top:0px;" class="input_modal">
        <div class="input-item">
          <span>商品名称：</span>
          <el-input v-model="goodsName1" placeholder="请输入内容" class="proName" @keyup.enter.native="getList1"></el-input>
        </div>
        <div class="input-item">
          <span>商品编号：</span>
          <el-input v-model="goodsCode1" placeholder="请输入内容" class="proName" @keyup.enter.native="getList1"></el-input>
           <el-button icon="el-icon-search" type="primary" size="medium" @click="getList1">查询</el-button>
        </div>
      </div>
      <div v-show="hotState">
        <el-table  v-loading="loading1" :data="tableData1" :border='true'>
          <el-table-column :formatter="formatter" prop="sort" label="顺序">
            <template slot-scope="scope">
              {{scope.row.sort||''}}
            </template>
          </el-table-column>
          <el-table-column :formatter="formatter" prop="esGoodsDTO.goodsCode" label="商品编号">
            <template slot-scope="scope">
              {{scope.row.isShow == 'y'?scope.row.esGoodsDTO.goodsCode:''}}
            </template>
          </el-table-column>
          <el-table-column :formatter="formatter" prop="esGoodsDTO.goodsName" label="商品名称">
            <template slot-scope="scope">
              {{scope.row.isShow == 'y'?scope.row.esGoodsDTO.goodsName:''}}
            </template>
          </el-table-column>
          <el-table-column :formatter="formatter" prop="esGoodsDTO.categoryDTO.categoryName" label="商品分类">
             <template slot-scope="scope">
              {{scope.row.isShow == 'y'?scope.row.esGoodsDTO.categoryDTO.categoryName:''}}
            </template>
          </el-table-column>
          <el-table-column :formatter="formatter" prop="categoryDTO.categoryName" label="商品品牌">
            <template slot-scope="scope">
              {{scope.row.isShow == 'y'?scope.row.esGoodsDTO.brandDTO.brandName:''}}
            </template>
          </el-table-column>
          <el-table-column :formatter="formatter" prop="esGoodsDTO.price" label="价格">
             <template slot-scope="scope">
              {{scope.row.isShow == 'y'?scope.row.esGoodsDTO.price:''}}
            </template>
          </el-table-column>
          <el-table-column width="280" prop="" label="操作">
            <template slot-scope="scope">
              <el-button v-if="scope.row.isShow == 'y'" @click="changeHot(scope.row.id)" type="primary" size="mini">修改</el-button>
              <el-button v-if="scope.row.isShow == 'y'" @click="removeHot(scope.row.id)" type="primary" size="mini">移除</el-button>
              <el-button v-if="scope.row.isShow != 'y'" @click="changeHot(scope.row.id)" type="primary" size="mini">添加</el-button>
              <el-button v-if="!scope.row.edit" @click="changeSort(scope.$index)" type="primary" size="mini">调整排序</el-button>
              <el-input style="width:60px;" v-model="scope.row.sortindex" v-if="scope.row.edit" placeholder=""></el-input>
              <el-button v-if="scope.row.edit" @click="handleSort(scope.$index)" type="primary" size="mini">确定</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div v-show="!hotState">
        <el-table  v-loading="loading3" :data="tableData2" :border='true'>
          <el-table-column :formatter="formatter" prop="goodsCode" label="商品编号"></el-table-column>
          <el-table-column :formatter="formatter" prop="goodsName" label="商品名称"></el-table-column>
          <el-table-column :formatter="formatter" prop="categoryDTO.categoryName" label="商品分类">
          </el-table-column>
          <el-table-column :formatter="formatter" prop="brandDTO.brandName" label="所属品牌"></el-table-column>
          <el-table-column :formatter="formatter" prop="price" label="价格"></el-table-column>
           <el-table-column width="200" prop="" label="操作">
            <template slot-scope="scope">
              <el-button @click="submitHot(scope.row.id)" type="primary" size="mini">设为热卖商品并保存</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="pagination">
          <el-pagination @size-change="handleSizeChange1" @current-change="handleCurrentChange1" :current-page.sync="pageIndex1" :page-size="pageSize" :page-sizes='[10,20,30,40]' layout="total, sizes, prev, pager, next, jumper" :total="pageCount1">
          </el-pagination>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
let CONSTANT = require("../../constant/constant.js");
let common = require("../../common.js");
export default {
  data() {
    return {
      tableData: [],
      tableData2:[],
      dateArr:[],
      dialogVisible:false,
      pageCount: null,
      pageCount1: null,
      pageIndex1:2,
      pageSize1:10,
      pageSize: 10,
      loading: true,
      user:{
          id:'',
          brandName:''
      },
      brandId:'',
    param:{
      goodsName:'',
      type:'',
      categoryId:'',
      brandId:'',
      goodsCode:'',
      isOpen:'',
      isOn:'',
      pageIndex:1,
      pageSize:10
    },
    isOn:'',
    isOpen:'',
    notOpenIds:'',
    openIds:'',
    sortArr:[],
    brandArr:[],
    loading3:false,
    typeArr:[
        {
            name:'实体商品',
            value:'real'
        },
         {
            name:'自营电子券',
            value:'virtual'
        },
        {
            name:'第三方电子券',
            value:'third'
        }
      ],
      dialogVisible1:false,
      tableData1:[],
      loading1:false,
      hotState:false,
      goodsCode:null,
      ids:[],
      selectVal:[],
      selectHotId:"",
      goodsName1:'',
      goodsCode1:''
    }
  },
  mounted() {
    if(this.$router.currentRoute.query.pageIndex){
      this.param = JSON.parse(this.$router.currentRoute.query.pageIndex)
    }
    this.getList();
    this.getSort()
    this.getBrandList()
  },
  methods: {
    getRowKeys(row) {
      return row.id;
    },
    changeSort(index){
      this.tableData1[index].edit = true
    },
    handleSort(index){
      let obj = this.tableData1[index]
      let  url = CONSTANT.URL.LIST.adjustSort;
      let param = {
        id:obj.id,
        sort:obj.sortindex
      } ;
      common.requestAjax(url,JSON.stringify(param),null,(res)=>{
          if(res.status == 200){
              this.$message({
                  type:'success',
                  message:'设置成功!'
              });
              this.getHotList()
          }
          else{
              this.$message({
                  type:'warning',
                  message:res.msg
              })
          }
      })  
    },
    changeHot(id){
      this.selectHotId = id
      this.dialogVisible1 = true
      this.hotState = false
      this.goodsName1= ''
      this.goodsCode1 = ''
      this.pageIndex1 = 1;
      this.pageSize1 = 10
      this.getList1();
    },
    handleSelectionChange(val){
      this.selectVal = val
      this.selectVal.map(item=>{
        this.ids.push(item.id)
      })
    },
    exportClick(){
      let sessionId = sessionStorage.getItem('sessionId');
      let url = `${CONSTANT.URL.LIST.goodExport}?sessionId=${sessionId}`;
       var data = {
         ids:this.ids,
         isAll:this.ids.length?'n':'y',
         goodsName:this.param.goodsName,
         type:this.param.type,
         categoryId:this.param.categoryId,
         brandId:this.param.brandId,
         goodsCode:this.param.goodsCode,
         isOpen:this.param.isOpen,
         isOn:this.param.isOn
       }
       common.post1(url, JSON.stringify(data), res => {
         var blob = new Blob([res], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });
          blob = URL.createObjectURL(blob)
          var fileName = "商品.xlsx"
          let link = document.createElement('a')
          link.href = blob
          link.download = fileName
          link.click()
          link.remove()
      });
    },
    hotBtn(){
      this.hotState = true
      this.dialogVisible1 = true
      this.getHotList()
    },
    submitHot(id){
      let  url = CONSTANT.URL.LIST.saveEsHotGoods;
      let param = {
        goodsId:id,
        id:this.selectHotId,
        isShow:'y'
      } ;
      common.requestAjax(url,JSON.stringify(param),null,(res)=>{
          if(res.status == 200){
              this.$message({
                  type:'success',
                  message:'设置成功!'
              });
              this.hotState = true
              this.dialogVisible1 = true
              this.getHotList()
          }
          else{
              this.$message({
                  type:'warning',
                  message:res.msg
              })
          }
      })  
    },
    removeHot(id){
      let  url = CONSTANT.URL.LIST.deleteEsHotGoods;
      let param = {id:id} ;
      common.requestAjax(url,JSON.stringify(param),null,(res)=>{
          if(res.status == 200){
              this.$message({
                  type:'success',
                  message:'删除成功!'
              });
              this.getHotList();
          }
          else{
              this.$message({
                  type:'warning',
                  message:res.msg
              })
          }
      })  
    },
    getSort: function() {
        let url = CONSTANT.URL.LIST.findEsCategoryByPage;
        let data = {
            pageIndex: 1,
            pageSize:1000
        };
        this.loading = true;
        common.requestAjax(url, JSON.stringify(data), null, res => {
            let data = res.data;
            this.sortArr = data.bussData;
        });
      },
    getHotList: function() {
       this.loading1 = true;
      let url = CONSTANT.URL.LIST.findEsHotGoodsByPage;
      common.requestAjax(url,null, null, res => {
        
        let data = res.data.bussData;
        data.forEach((item,index)=>{
          item.sort = index+1
          item.edit = false
          item.sortindex = ''
        })
         this.loading1 = false;
        this.tableData1 = data;
      });
    },
    getBrandList: function() {
      let url = CONSTANT.URL.LIST.findEsBrandByPage;
      let data = {
        pageIndex:1,
        pageSize: 1000
      };
      common.requestAjax(url, JSON.stringify(data), null, res => {
        let data = res.data;
        this.brandArr = data.bussData;
      });
    },
    returnName(val){
          let str;
          this.typeArr.map(item=>{
              if(item.value == val){
                  str = item.name
              }
          })
          return str
      },
    formatter(row, column, cellValue) {
      return cellValue ? cellValue : "- -";
    },
    addBtn(){
       this.dialogVisible = true
    },  
    linkTo(path,id,type){
       this.$router.push({
         path:path,
         query:{
           id:id||'',
           type:type||'',
           pageIndex:JSON.stringify(this.param)
         }
       })
    },
    editBtn(id){
      this.$router.push('goodEdit?id='+id+'&pageIndex='+JSON.stringify(this.param))
    },
    deleteRole:function(id) {
        this.$confirm('确定删除?', '提示', {           
            confirmButtonText: '确定',           
            cancelButtonText: '取消',           
            type: 'warning'         
        }).then(() => {           
            let  url = CONSTANT.URL.LIST.deleteEsGoods;
            let param = {id:id} ;
            common.requestAjax(url,JSON.stringify(param),null,(res)=>{
                if(res.status == 200){
                    this.$message({
                        type:'success',
                        message:'删除成功!'
                    });
                    this.getList();
                }
                else{
                    this.$message({
                        type:'warning',
                        message:res.msg
                    })
                }
            })      
        }).catch(() => {           
            this.$message({             
                type: 'info',             
                message: '已取消删除'           
            });                   
        });    
    },
    handSave(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          let url = CONSTANT.URL.LIST.saveEsBrand;
          common.requestAjax(url, JSON.stringify(this.user), null, res => {
            if (res.status == 200) {
              this.$message({
                type: "success",
                message: "保存成功！"
              });
              this.getList();
              this.dialogVisible = false;
              this.user = {
                id: "",
                papersName: "",
                status: "normal"
              };
               this.$router.replace({
                  name: "testAdd",
                  query: { pageIndex: this.pageIndex, id:res.data.bussData.id,pageIndex:this.pageIndex}
                });
            } else {
              this.$message({
                type: "warning",
                message: res.msg
              });
            }
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    getList: function() {
      let url = CONSTANT.URL.LIST.findEsGoodsByPage;
      let data = {
        pageIndex: this.param.pageIndex,
        pageSize: this.param.pageSize,
        brandId:this.param.brandId,
        goodsName:this.param.goodsName,
        isOn:this.param.isOn,
        isOpen:this.param.isOpen,
        goodsCode:this.param.goodsCode,
        categoryId:this.param.categoryId,
        type:this.param.type
      };
      this.loading = true;
      common.requestAjax(url, JSON.stringify(data), null, res => {
        this.loading = false;
        let data = res.data;
        this.tableData = data.bussData;
        this.tableData2 = data.bussData
        this.pageCount = data.count;
      });
    },
    search: function(e) {
      if (e.keyCode == 13) {
        this.pageIndex = 1;
        this.getList();
      }
    },
    handleSizeChange(val) {
      this.param.pageSize = val;
      this.getList();
    },
    handleCurrentChange(val) {
      this.param.pageIndex = val;
      this.getList();
    },
    getList1: function() {
      let url = CONSTANT.URL.LIST.findEsGoodsByPage;
      let data = {
        pageIndex: this.pageIndex1,
        pageSize: this.pageSize1,
        goodsName:this.goodsName1,
        goodsCode:this.goodsCode1,
      };
      this.loading3 = true;
      common.requestAjax(url, JSON.stringify(data), null, res => {
        this.loading3 = false;
        let data = res.data;
        this.tableData2 = data.bussData
        this.pageCount1 = data.count;
      });
    },
    handleSizeChange1(val) {
      this.pageSize1 = val;
      this.getList1();
    },
    handleCurrentChange1(val) {
      this.pageIndex1 = val;
      this.getList1();
    }
  }
};
</script>
